@import 'sulu-admin-bundle/containers/Application/colors.scss';

$iconsTextColor: #262626;

.icon-card {
    width: 25%;
    padding: 16px;

    @media screen and (max-width: 1023px) {
        width: 50%;
    }

    @media screen and (max-width: 500px) {
        width: 100%;
    }
}

.icon-card-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
    padding: 16px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: rgba($white, .5);
    text-align: center;
    transition: border-color .15s ease;
    cursor: pointer;

    svg {
        width: 50px;
        height: 50px;
        transition: transform .15s ease;
    }

    &:hover {
        border-color: rgba($black, .2);
    }

    &.is-selected {
        border-color: $shakespeare;
    }
}

.icon-card-title {
    display: block;
    width: 100%;
    margin-top: 10px;
    font-size: 12px;
    color: $iconsTextColor;
}
